<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
</head>

<body>
    <h3>传值（水）和传地址（杯子）</h3>
    <p>基本数据类型(水)</p>
    <p>引用数据类型(杯子)</p>

    <script>
        // 传值
        var width = "100px";
        var color = "red";
        var num = 100;

        var str = width;
        str = "xxxx";// 赋值
        console.log(width);// 100px
        console.log(str);  // xxxx
        // width 和 str 这俩变量是独立的数据，互不影响


        // 传地址
        var arr = ["red"]
        var obj = { left: "200px" }
        var opt = obj; // 复制（地址）   此事，obj 和 opt 引用同一个地址
        opt.left = "999px";// left属性值被修改了 ， obj 和 opt 的这俩数据都变化了
        console.log(obj); // {left: "999px"}
        console.log(opt); // {left: "999px"}

        // obj 和 opt  这俩其他一个数据做了修改，会互相影响


        var height = "100px";
        var red = "red";
        var number = 100;

        var str = height;
        str1 = "xxxx";
        console.log(str1);
        console.log(height);

        var foo = ["red"];
        var obq = {left : "200px"};
        var opw = obq;
        opw.left = "300px";
        console.log(obq);
        console.log(opw);










    </script>
</body>

</html>